<template>
  <div class="paihang banxin tanxing">
    <div class="besides">
      <Banglist
        :myArr="YunMusicArr.slice(0, 4)"
        num="index < 4"
        title="云音乐特色榜"
      />
      <Banglist
        :myArr="YunMusicArr.slice(4, 37)"
        num="index > 3"
        title="全球媒体榜"
      />
    </div>

    <Xiangqing />
  </div>
</template>

<script>
import Banglist from '@/components/Banglist.vue';
import MusicList from '@/components/MusicList.vue';
import Pinglunlist from '@/components/Pinglunlist.vue';
import { PaihangApi } from '@/request/api'
import Xiangqing from '@/components/Xiangqing.vue';
export default {
  data() {
    return {
      YunMusicArr: [],

    }
  },
  components: {
    Banglist,
    MusicList,
    Pinglunlist,
    Xiangqing
  },
  created() {
    PaihangApi().then(res => {

      if (res.data.code == 200) {
        this.YunMusicArr = res.data.list
      }
    })
  }
}
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.besides {
  width: 240px;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
</style>